<template>
<div>
    <Card :bordered="false" dis-hover>
        <!-- container start -->
        <div class="container page-wrap w1250">
            <!-- 条件筛选 start -->
            <div class="screen-box">
                <!-- 位置 -->
                <dl class="screen-box-list displayflex">
                    <dt class="flexitem">位置：</dt>
                    <dd>
                        <a @click='searchBox("City", "")' :class='{active:search.City==""}'>不限</a>
                        <a @click='searchBox("City", "410100")' :class='{active:search.City=="410100"}'>郑州市</a>
                        <a @click='searchBox("City", "410200")' :class='{active:search.City=="410200"}'>开封市</a>
                        <a @click='searchBox("City", "410300")' :class='{active:search.City=="410300"}'>洛阳市</a>
                        <a @click='searchBox("City", "410400")' :class='{active:search.City=="410400"}'>平顶山市</a>
                        <a @click='searchBox("City", "410500")' :class='{active:search.City=="410500"}'>安阳市</a>
                        <a @click='searchBox("City", "410600")' :class='{active:search.City=="410600"}'>鹤壁市</a>
                        <a @click='searchBox("City", "410700")' :class='{active:search.City=="410700"}'>新乡市</a>
                        <a @click='searchBox("City", "410800")' :class='{active:search.City=="410800"}'>焦作市</a>
                        <a @click='searchBox("City", "410900")' :class='{active:search.City=="410900"}'>濮阳市</a>
                        <a @click='searchBox("City", "411000")' :class='{active:search.City=="411000"}'>许昌市</a>
                        <a @click='searchBox("City", "411100")' :class='{active:search.City=="411100"}'>漯河市</a>
                        <a @click='searchBox("City", "411200")' :class='{active:search.City=="411200"}'>三门峡市</a>
                        <a @click='searchBox("City", "411300")' :class='{active:search.City=="411300"}'>南阳市</a>
                        <a @click='searchBox("City", "411400")' :class='{active:search.City=="411400"}'>商丘市</a>
                        <a @click='searchBox("City", "411500")' :class='{active:search.City=="411500"}'>信阳市</a>
                        <a @click='searchBox("City", "411600")' :class='{active:search.City=="411600"}'>周口市</a>
                        <a @click='searchBox("City", "411700")' :class='{active:search.City=="411700"}'>驻马店市</a>
                        <a @click='searchBox("City", "419001")' :class='{active:search.City=="419001"}'>济源市</a>
                    </dd>
                </dl>
                <!-- 存储标准 -->
                <dl class="screen-box-list displayflex">
                    <dt class="flexitem">存储标准：</dt>
                    <dd>
                        <a @click='searchBox("StorageType", "")' :class='{active:search.StorageType==""}'>不限</a>
                        <a @click='searchBox("StorageType", "01")' :class='{active:search.StorageType=="01"}'>普通仓</a>
                        <a @click='searchBox("StorageType", "02")' :class='{active:search.StorageType=="02"}'>恒温仓</a>
                        <a @click='searchBox("StorageType", "03")' :class='{active:search.StorageType=="03"}'>冷藏仓</a>
                        <a @click='searchBox("StorageType", "04")' :class='{active:search.StorageType=="04"}'>冷冻仓</a>
                        <a @click='searchBox("StorageType", "05")' :class='{active:search.StorageType=="05"}'>多温仓</a>
                        <a @click='searchBox("StorageType", "06")' :class='{active:search.StorageType=="06"}'>露天堆场</a>
                        <a @click='searchBox("StorageType", "07")' :class='{active:search.StorageType=="07"}'>有棚堆场</a>
                        <a @click='searchBox("StorageType", "08")' :class='{active:search.StorageType=="08"}'>危化品库</a>
                        <a @click='searchBox("StorageType", "09")' :class='{active:search.StorageType=="09"}'>医药库</a>
                        <a @click='searchBox("StorageType", "10")' :class='{active:search.StorageType=="10"}'>其他</a>
                    </dd>
                </dl>
                <!-- 类型 -->
                <dl class="screen-box-list displayflex">
                    <dt class="flexitem">类型：</dt>
                    <dd>
                        <a @click='searchBox("WareHouseType", "")' :class='{active:search.WareHouseType==""}'>不限</a>
                        <a @click='searchBox("WareHouseType", "01")' :class='{active:search.WareHouseType=="01"}'>平库</a>
                        <a @click='searchBox("WareHouseType", "02")' :class='{active:search.WareHouseType=="02"}'>高台库</a>
                        <a @click='searchBox("WareHouseType", "03")' :class='{active:search.WareHouseType=="03"}'>楼库</a>
                        <a @click='searchBox("WareHouseType", "04")' :class='{active:search.WareHouseType=="04"}'>地下仓库</a>
                        <a @click='searchBox("WareHouseType", "05")' :class='{active:search.WareHouseType=="05"}'>立体库</a>
                        <a @click='searchBox("WareHouseType", "06")' :class='{active:search.WareHouseType=="06"}'>坡道库</a>
                        <a @click='searchBox("WareHouseType", "07")' :class='{active:search.WareHouseType=="07"}'>气体库</a>
                    </dd>
                </dl>
                <!-- 面积 -->
                <dl class="screen-box-list displayflex">
                    <dt class="flexitem">面积：</dt>
                    <dd>
                        <a @click='searchBox("TotalAreaAge", "")' :class='{active:search.TotalAreaAge==""}'>不限</a>
                        <a @click='searchBox("TotalAreaAge", "1")' :class='{active:search.TotalAreaAge=="1"}'>≤1000平米</a>
                        <a @click='searchBox("TotalAreaAge", "2")' :class='{active:search.TotalAreaAge=="2"}'>1000-5000平米</a>
                        <a @click='searchBox("TotalAreaAge", "3")' :class='{active:search.TotalAreaAge=="3"}'>5000-10000平米</a>
                        <a @click='searchBox("TotalAreaAge", "4")' :class='{active:search.TotalAreaAge=="4"}'>10000-20000平米</a>
                        <a @click='searchBox("TotalAreaAge", "5")' :class='{active:search.TotalAreaAge=="5"}'>≥20000平米</a>
                    </dd>
                </dl>
                <!-- 月台 -->
                <dl class="screen-box-list displayflex" :class='{"hidden":state}'>
                    <dt class="flexitem">月台：</dt>
                    <dd>
                        <a @click='searchBox("Platform", "")' :class='{active:search.Platform==""}'>不限</a>
                        <a @click='searchBox("Platform", "1")' :class='{active:search.Platform=="1"}'>无月台</a>
                        <a @click='searchBox("Platform", "2")' :class='{active:search.Platform=="2"}'>单面月台</a>
                        <a @click='searchBox("Platform", "3")' :class='{active:search.Platform=="3"}'>双面月台</a>
                        <a @click='searchBox("Platform", "4")' :class='{active:search.Platform=="4"}'>更多面月台</a>
                    </dd>
                </dl>
                <!-- 消防 -->
                <dl class="screen-box-list displayflex" :class='{"hidden":state}'>
                    <dt class="flexitem">消防：</dt>
                    <dd>
                        <a @click='searchBox("FireFighting", "")' :class='{active:search.FireFighting==""}'>不限</a>
                        <a @click='searchBox("FireFighting", "1")' :class='{active:search.FireFighting=="1"}'>无</a>
                        <a @click='searchBox("FireFighting", "2")' :class='{active:search.FireFighting=="2"}'>甲类</a>
                        <a @click='searchBox("FireFighting", "3")' :class='{active:search.FireFighting=="3"}'>乙类</a>
                        <a @click='searchBox("FireFighting", "4")' :class='{active:search.FireFighting=="4"}'>丙类</a>
                        <a @click='searchBox("FireFighting", "5")' :class='{active:search.FireFighting=="5"}'>丁类</a>
                        <a @click='searchBox("FireFighting", "6")' :class='{active:search.FireFighting=="6"}'>戊类</a>
                        <a @click='searchBox("FireFighting", "7")' :class='{active:search.FireFighting=="7"}'>正在办理</a>
                    </dd>
                </dl>
                <!-- 结构 -->
                <dl class="screen-box-list displayflex" :class='{"hidden":state}'>
                    <dt class="flexitem">结构：</dt>
                    <dd>
                        <a @click='searchBox("BuildingStructure", "")' :class='{active:search.BuildingStructure==""}'>不限</a>
                        <a @click='searchBox("BuildingStructure", "1")' :class='{active:search.BuildingStructure=="1"}'>砖瓦混合</a>
                        <a @click='searchBox("BuildingStructure", "2")' :class='{active:search.BuildingStructure=="2"}'>轻钢结构</a>
                        <a @click='searchBox("BuildingStructure", "3")' :class='{active:search.BuildingStructure=="3"}'>重钢结构</a>
                        <a @click='searchBox("BuildingStructure", "4")' :class='{active:search.BuildingStructure=="4"}'>钢混结构</a>
                    </dd>
                </dl>
                <!-- 层高 -->
                <dl class="screen-box-list displayflex" :class='{"hidden":state}'>
                    <dt class="flexitem">层高：</dt>
                    <dd>
                        <a @click='searchBox("FloorHeight", "")' :class='{active:search.FloorHeight==""}'>不限</a>
                        <a @click='searchBox("FloorHeight", "1")' :class='{active:search.FloorHeight=="1"}'>6米以下</a>
                        <a @click='searchBox("FloorHeight", "2")' :class='{active:search.FloorHeight=="2"}'>6-9米</a>
                        <a @click='searchBox("FloorHeight", "3")' :class='{active:search.FloorHeight=="3"}'>9-12米</a>
                        <a @click='searchBox("FloorHeight", "4")' :class='{active:search.FloorHeight=="4"}'>12米以上</a>
                    </dd>
                </dl>
                <!-- 租金 -->
                <dl class="screen-box-list displayflex">
                    <dt class="flexitem">租金：</dt>
                    <dd>
                        <a @click='searchBox("LeasingPrice", "")' :class='{active:search.LeasingPrice==""}'>不限</a>
                        <a @click='searchBox("LeasingPrice", "1")' :class='{active:search.LeasingPrice=="1"}'>≤15元/㎡/月</a>
                        <a @click='searchBox("LeasingPrice", "2")' :class='{active:search.LeasingPrice=="2"}'>15-20元/㎡/月</a>
                        <a @click='searchBox("LeasingPrice", "3")' :class='{active:search.LeasingPrice=="3"}'>20-25元/㎡/月</a>
                        <a @click='searchBox("LeasingPrice", "4")' :class='{active:search.LeasingPrice=="4"}'>25-30元/㎡/月</a>
                        <a @click='searchBox("LeasingPrice", "5")' :class='{active:search.LeasingPrice=="5"}'>≥30元/㎡/月</a>
                    </dd>
                </dl>
                <div class="text-center">
                    <a class="screen-btn" @click='state=!state'>更多选项（月台、消防、建筑类型、层高等） <i class="iconfont icon-expand" :class='{"hidden":!state}'></i></a>
                </div>
            </div>
            <!-- 排序 start -->
            <div class="page-title">
                <h2 class="data-record">当前共有<b>{{search.total}}</b>条仓库信息</h2>
            </div>
            <!-- 列表 start -->
            <div class="recommend-list-wrap">
                <dl class="recommend-list" v-for='item in list'>
                    <dt class="recommend-img rela-img">
                        <img :src="item.path">
                    </dt>
                    <dd class="recommend-text displayflex">
                        <div class="recommend-text-info flex1">
                            <h2>{{item.ChineseName}}</h2>
                            <p class="address"><i class="iconfont icon-address"></i>{{item.Venue}}</p>
                            <div class="progress-frame">
                                <span>信息完整度</span>
                                <div class="progress">
                                    <div class="progress-bar" :style="{ 'width': getDataIntegrity(item) }"></div>
                                </div>
                                <div class="progress-value">{{getDataIntegrity(item)}}</div>
                            </div>
                            <p>总面积 <strong>{{item.TotalAreaAge}}</strong>㎡ <span v-if="item.StorageType =='03' || item.StorageType == '04'"> · 仓库体积 <strong>{{item.TotalVolume}}</strong> m³</span></p>
                            <p>{{ item.WareHouseType | WareHouseType}} | {{item.StorageType | StorageType}} | {{item.Platform | Platform}} | {{item.BuildingStructure | BuildingStructure}} | {{item.FireFighting | FireFighting}} | 层高 {{item.FloorHeight | FloorHeight}}</p>
                            <p>
                                <b><i class="empty">空</i>{{item.checked}}</b>
                            </p>
                        </div>
                        <div class="recommend-text-price flex1">
                            <ul>
                                <li>可租面积 <b class="red">{{item.CanRentedArea}}</b> ㎡</li>
                                <li><b class="red">¥ <strong>{{item.LeasingPrice}}</strong></b> 起 <i>元/㎡/月</i></li>
                            </ul>
                        </div>
                        <div class="recommend-text-btn" style="padding-top: 73px;">
                            <div class="btn-group flex1" v-show="false">
                                <a href="#"><i class="iconfont icon-star-hollow"></i>关注仓库</a>
                            </div>
                            <div class="btn-group flex1">
                                <a href="qq:59907980"><i class="iconfont icon-tel"></i>联系方式</a>
                            </div>
                            <div class="btn-group flex1" v-show="false">
                                <a href="#"><input type="checkbox">加入咨询</a>
                            </div>
                            <div class="btn-group flex1">
                                <a href="javascript:;" @click='detailGo(item.GUID)'><i class="iconfont icon-search" ></i>查看详情</a>
                            </div>
                        </div>
                    </dd>
                </dl>
            </div>
            <!-- 页码 -->
            <Page show-total :page-size="search.pageSize" :current="search.PageIndex" :total="search.total" @on-change="changePage"></Page>
            <!-- 推荐需求 -->
            <div class="related-recommend">
                <div class="related-tit">
                    <h2>推荐需求</h2>
                </div>
                <ul class="index-recommend-content">
                    <li v-for='item in recommends'>
                        <a @click='detailGo(item.GUID)'>
                        <dt class="index-recommend-img rela-img">
                            <img :src="item.path">
                        </dt>
                        <dd class="index-recommend-text">
                            <div class="warehouse-name displayflex">
                            <b class="flex1">{{item.ChineseName}}</b>
                            <span class="flexitem"><strong>{{item.Minleasedrea}}</strong>元/m²/月 起</span>
                            </div>
                            <p class="iconfont icon-address-full">{{item.Venue}}</p>
                            <div class="warehouse-info">
                            <i>{{item.StorageType | StorageType}}</i>
                            <i>{{ item.WareHouseType | WareHouseType}}</i>
                            <i>可租 {{item.CanRentedArea}}m²</i>
                            <!-- <em>临近高速</em> -->
                            </div>
                        </dd>
                    </a>
                    </li>
                </ul>
            </div>
        </div>
    </Card>
</div>
</template>

<script>
const checkProperties = [
    'LogCenterName', 'ChineseName', 'Contacts', 'ContactTel', 'WareHouseType',
    'TotalAreaAge', 'CanRentedArea', 'Minleasedrea', 'StorageType', 'LeasingPrice',
    'venue', 'Address', 'WarehouseIntroduction', 'Platform', 'BuildingStructure', 'FloorHeight',
    'FireFighting', 'ServiceRange', 'SecuritySystem', 'FireFightingSystem', 'GoodsCategory', 'PictContent','TotalVolume'
];

export default {
    data() {
        return {
            list: [],
            recommends: [],
            search: {
                Province: "410000",
                City: "",
                StorageType: "",
                WareHouseType: "",
                Platform: "",
                FireFighting: "",
                BuildingStructure: "",
                LeasingPrice: "",
                TotalAreaAge: "",
                minFloorHeight: 0,
                maxFloorHeight: 0,
                IsPublish: "Y",
                PageIndex: 1,
                pageSize: 10,
                total: 0,
                page: 1
            },
            state: true,
            datas: "",
        };
    },
    mounted() {
        let self = this;

        this.axios
            .post("/api/warehouse/search", {
                Province: "410000",
                IsPublish: "Y",
                PageIndex: 1,
                PageSize: 4
            })
            .then(function(res) {
                for (var a = 0; a < res.datas.length; a++) {
                    if (res.datas[a].CanRentedArea > 0) {
                        res.datas[a].checked = "未满租";
                    } else {
                        res.datas[a].checked = "已满租";
                    }
                }

                res.datas.forEach(e => {
                    e.PictContent = JSON.parse(e.PictContent);

                    if (e.PictContent && e.PictContent.length > 0) {
                        e.path = (e.PictContent.find(c => c && c.path) || {path: "/index-recommend02.jpg"}).path;
                    } else {
                        e.path = "/index-recommend02.jpg";
                    }
                });

                self.recommends = res.datas;
            });
    },
    methods: {
        getData: function() {
            var self = this;
            if (self.search.FloorHeight == "") {
                self.search.minFloorHeight = 0;
                self.search.maxFloorHeight = "";
            } else if (self.search.FloorHeight == "1") {
                self.search.minFloorHeight = 0;
                self.search.maxFloorHeight = 6;
            } else if (self.search.FloorHeight == "2") {
                self.search.minFloorHeight = 6;
                self.search.maxFloorHeight = 9;
            } else if (self.search.FloorHeight == "3") {
                self.search.minFloorHeight = 9;
                self.search.maxFloorHeight = 12;
            } else if (self.search.FloorHeight == "4") {
                self.search.minFloorHeight = 12;
                self.search.maxFloorHeight = "";
            } else if (self.search.TotalAreaAge == "") {
                self.search.minTotalAreaAge = 0;
                self.search.maxTotalAreaAge = "";
            } else if (self.search.TotalAreaAge == "1") {
                self.search.minTotalAreaAge = 0;
                self.search.maxTotalAreaAge = 1000;
            } else if (self.search.TotalAreaAge == "2") {
                self.search.minTotalAreaAge = 1000;
                self.search.maxTotalAreaAge = 5000;
            } else if (self.search.TotalAreaAge == "3") {
                self.search.minTotalAreaAge = 5000;
                self.search.maxTotalAreaAge = 10000;
            } else if (self.search.TotalAreaAge == "4") {
                self.search.minTotalAreaAge = 10000;
                self.search.maxTotalAreaAge = 20000;
            } else if (self.search.TotalAreaAge == "5") {
                self.search.minTotalAreaAge = 20000;
                self.search.maxTotalAreaAge = "";
            } else if (self.search.LeasingPrice == "1") {
                self.search.minLeasingPrice = 0;
                self.search.maxLeasingPrice = 15;
            } else if (self.search.LeasingPrice == "2") {
                self.search.minLeasingPrice = 15;
                self.search.maxLeasingPrice = 20;
            } else if (self.search.LeasingPrice == "3") {
                self.search.minLeasingPrice = 20;
                self.search.maxLeasingPrice = 25;
            } else if (self.search.LeasingPrice == "4") {
                self.search.minLeasingPrice = 25;
                self.search.maxLeasingPrice = 30;
            } else if (self.search.LeasingPrice == "5") {
                self.search.minLeasingPrice = 30;
                self.search.maxLeasingPrice = "";
            }

            this.axios.post("/api/warehouse/search", self.search).then(function(res) {
                for (var a = 0; a < res.datas.length; a++) {
                    if (res.datas[a].CanRentedArea > 0) {
                        res.datas[a].checked = "未满租";
                    } else {
                        res.datas[a].checked = "已满租";
                    }
                }

                res.datas.forEach(e => {
                    e.PictContent = JSON.parse(e.PictContent);

                    if (e.PictContent && e.PictContent.length > 0) {
                        e.path = (e.PictContent.find(c => c && c.path) || {path: "/index-recommend02.jpg"}).path;
                    } else {
                        e.path = "/index-recommend02.jpg";
                    }
                });

                self.list = res.datas;
                self.search.total = res.total;
            });
        },
        detailGo: function(GUID) {
            this.$router.push(`/front/warehouseDetail/${GUID}`);
        },
        changePage(pageNum) {
            this.search.PageIndex = pageNum;
            this.getData();
        },
        getDataIntegrity(val) {
            return (checkProperties.filter(c => val[c] && val[c].length > 0).length / checkProperties.length * 100).toFixed(0) + '%';
        },
        searchBox: function(propName, value) {
            this.search[propName] = value;
            this.getData();
        }
    },
    created() {
        this.search.City = this.$route.query.City;
        this.search.TotalAreaAge = this.$route.query.TotalAreaAge;
        this.search.WareHouseType = this.$route.query.WareHouseType;

        this.getData();
    },
    activated() {
        this.created();
    }
};
</script>


